<?php
$dbms='mysql';     //数据库类型
//$host='localhost'; //数据库主机名
//$dbName='light';    //使用的数据库
//$user='root';      //数据库连接用户名
//$pass='asJaH21Kc';          //对应的密码
//$pass = '';
$host='10.66.203.63'; //数据库主机名
$dbName='lighter_longyue8_com';    //使用的数据库
$user='lighter';      //数据库连接用户名
$pass='lighter_longyue8_com';          //对应的密码

$dsn="$dbms:host=$host;dbname=$dbName";

$dbh = new PDO($dsn, $user, $pass); //初始化一个PDO对象
$dbh->query('SET NAMES utf8')->execute();

$query = $dbh->query('SELECT * from activity WHERE id=1');
//var_dump($xxx->fetchAll(PDO::FETCH_ASSOC));
$num = $query->fetch(PDO::FETCH_ASSOC);
//exit;
if(isset($_POST['username']) && isset($_POST['tel']) && $_POST['username'] != '' && $_POST['tel'] != ''){
    $res = $dbh->prepare("INSERT INTO  user (username,tel,created_at) VALUES (:username,:tel,:create_at)");
    $id  = $res->execute([':username'=>$_POST['username'], ':tel'=>$_POST['tel'],':create_at'=>time()]);
    echo 'true';
    exit;
}
    /*你还可以进行一次搜索操作
    foreach ($dbh->query('SELECT * from FOO') as $row) {
        print_r($row); //你可以用 echo($GLOBAL); 来看到这些值
    }
    */
//默认这个不是长连接，如果需要数据库长连接，需要最后加一个参数：array(PDO::ATTR_PERSISTENT => true) 变成这样：

;?>
<html style="font-size: 58.5938px;">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,  user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="cache-control" content="no-cache">
    <title></title>
    <meta name="description" content="">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <script>
        function rem(psd){document.documentElement.style.fontSize = 100*document.documentElement.clientWidth / psd + 'px';}
        rem(750);
    </script>
    <link rel="stylesheet" href="./styles/css/style.css?v=13">
</head>
<body>
<ul class="logo_box clearfix">
    <li class="clearfix">
    <?php for($i=1;$i<65;$i= $i+3):?>
         <img src="styles/img/<?=$i;?>.png" class="img_<?=$i;?>" style="margin:<?=mt_rand(10,30);?>px auto;" alt="">
    <?php endfor;?>
        <img src="styles/img/star1.png" class="star1" alt="">
        <img src="styles/img/star2.png" class="star2" alt="">
        <img src="styles/img/star3.png" class="star3" alt="">
        <img src="styles/img/brand_yun.png" id="brand_yun" alt="">
        <img src="styles/img/brand_yun3.png" id="brand_yun3" alt="">
        <img src="styles/img/brand_yun4.png" id="brand_yun4" alt="">
    </li>
    <li class="clearfix">
    <?php for($i=2;$i<66;$i= $i+3):?>
         <img src="styles/img/<?=$i;?>.png" class="img_<?=$i;?>" style="margin:<?=mt_rand(10,30);?>px auto;" alt="">
    <?php endfor;?>
        <img src="styles/img/star1.png" class="star1" alt="">
        <img src="styles/img/star2.png" class="star2" alt="">
        <img src="styles/img/star3.png" class="star3" alt="">
    </li>
    <li class="clearfix">
    <?php for($i=3;$i<67;$i= $i+3):?>
        <img src="styles/img/<?=$i;?>.png" class="img_<?=$i;?>" style="margin:<?=mt_rand(10,30);?>px auto;" alt="">
    <?php endfor;?>
        <img src="styles/img/star1.png" class="star1" alt="">
        <img src="styles/img/star2.png" class="star2" alt="">
        <img src="styles/img/star3.png" class="star3" alt="">
        <img src="styles/img/brand_yun2.png" id="brand_yun2" alt="">
        <img src="styles/img/brand_yun5.png" id="brand_yun5" alt="">
    </li>
</ul>
<div class="lighter_body grey50 grey"  style="display: none;">
    <img src="styles/img/star1.png" class="star1" alt="">
    <img src="styles/img/yun_left.png" alt="" class="yun_left">
    <img src="styles/img/yun_right.png" alt="" class="yun_right">
    <img src="styles/img/yun1.png" alt="" class="yun_1">
    <img src="styles/img/yun2.png" alt="" class="yun_2">
    <img src="styles/img/yun3.png" alt="" class="yun_3">
    <img src="styles/img/yun4.png" alt="" class="yun_4">
    <img src="styles/img/yun_left.png" alt="" class="yun_5">
    <img src="styles/img/yun_right.png" alt="" class="yun_6">
    <img src="styles/img/brand_yun3.png" alt="" class="yun_7">
    <img src="styles/img/brand_yun5.png" alt="" class="yun_8">
    <img src="styles/img/title.png" class="lighter_title" alt="">
    <div class="ligher_box" style="display: none;">
        <img src="styles/img/star2.png" class="star2" alt="">
        <img src="styles/img/star3.png" class="star3" alt="">
        <img src="styles/img/star2.png" class="star4" alt="">
        <img src="styles/img/star3.png" class="star5" alt="">
        <p>您是第 <span><?=$num['num']+1;?></span> 位点亮中山路芳华的“时光使者”</p>
        <a href="javascript:void(0);" onclick="$('.layer').show();" class="get_prize"></a>
    </div>
</div>

<script type="text/javascript" src="styles/js/zepto.min.js"></script>
<div class="layer">
    <i onclick="$('.layer').hide();"></i>
    <form class="inside" id="form" method="post">
        <input type="text" name="username" placeholder="请输入姓名">
        <input type="text" name="tel" placeholder="请输入电话">
        <input type="button" value="提交" onclick="check();">
    </form>
    <img src="styles/img/share.png" class="share" alt="">
    <p class="tip">
        4月7日<br/>
        世茂时光里·芳华<br/>
        全新轻奢精装样板绽放<br/>
        <br/>
        到访即可领取【芳华VIP品牌手册】<br/>
        享受10000元中山路品牌优惠<br/>
        <br/>
        更有机会抽取IPHONEX、whirlpool智能机器人吸尘器、<br/>膳魔师微电脑电饭煲、小米平衡车等家电豪礼
    </p>
</div>
<script type="text/javascript">
    function check(){
        if($('input[name=username]').val() == ''){
            alert('姓名不能为空');
            return false;
        }
        if($('input[name=tel]').val() == ''){
            alert('电话不能为空');
            return false;
        }
        if($('input[name=tel]').val().length > 15){
            alert('电话长度过长');
            return false;
        }
        if( $('input[name=tel]').val().length < 11){
            alert('电话长度不得小于11位');
            return false;
        }
        $.ajax({
            type: "POST",
            url: window.location.href,
            data: {
                'username':$('input[name=username]').val(),
                'tel':$('input[name=tel]').val()
            },
            dataType : "json",
            success: function(res){
                if(res){
                    $('form').hide();
                    $('.share').show();
                    $('.tip').show();
                }
            }
        });
        return true;
    }
    $(function(){
        var i = 1;
        var height = 0;

        var imgs =[
            'styles/img/star_bg.jpg'
        ];
        var img = [];
        var len=imgs.length;
        var loadedCount = 0;
        for(var i=0;i<len;i++){
            img[i]=new Image();
            img[i].src=imgs[i];
            img[i].onload = function(){
                loadedCount++;
                if (loadedCount>=len){
                    var time = setInterval(function(){
                        if(i < 67){
                            var name = 'img_' + i;
                            $('.'+ name ).animate({'opacity':1});
                            i = i + 1;
                        }else{
                            clearInterval(time);
                        }
                        height = '-' + ($('.logo_box').height() - $('body').height()) + 'px';
                    },100);
//        var height = '-' + ($('.logo_box').height() + 100 + $('.lighter_body').height()) + 'px';
                    setTimeout(function(){
                        $('.logo_box').animate({'marginTop': height},6000,'linear',function(){
                            $('.logo_box').fadeOut(1000,function () {
                                $('.lighter_body').fadeIn(1500,function () {
                                    /*云朵散去*/
                                    $('img.yun_1').animate({left:"-500px"},1500,'linear',function(){
                                        $('.lighter_title').animate({'opacity':1},500);
                                    });
                                    $('img.yun_3').animate({left:"-500px"},2000,'linear',function(){
                                    });
                                    $('img.yun_5').animate({left:"-500px"},2000,'linear',function(){
                                    });
                                    $('img.yun_7').animate({left:"-500px"},1500,'linear',function(){
                                    });
                                    $('img.yun_left').animate({left:"-500px"},2500,'linear',function(){})
                                    $('img.yun_2').animate({right:"-500px"},1500,'linear',function(){
                                    })
                                    $('img.yun_6').animate({right:"-500px"},2000,'linear',function(){
                                    })
                                    $('img.yun_8').animate({right:"-500px"},1500,'linear',function(){
                                    })
                                    $('img.yun_4').animate({right:"-500px"},2000,'linear',function(){
                                        $('.lighter_body').removeClass('grey');
                                        setTimeout(function(){
                                            $('.lighter_body').removeClass('grey50');
                                            $('.ligher_box').fadeIn(1000,function () {
                                                $('.ligher_box a').animate({marginTop:'5px'})
                                            });
                                        },1000)
                                    });
                                    $('img.yun_right').animate({right:"-500px"},2500,'linear',function(){});
                                });
                            });
                        });
                    },1000)
                    setTimeout(function(){
                        $('img#brand_yun').animate({'left':'-200px'},1000);
                    },2000)
                    setTimeout(function(){
                        $('img#brand_yun2').animate({'right':'-200px'},1000);
                    },3000)
                    setTimeout(function(){
                        $('img#brand_yun3').animate({'left':'-200px'},1000);
                    },4600)
                    setTimeout(function(){
                        $('img#brand_yun4').animate({'left':'-300px'},1000);
                    },6000)
                    setTimeout(function(){
                        $('img#brand_yun5').animate({'right':'-300px'},1000);
                    },6400)
                }
            };
        }
    })
    function sleep(n){
        var start=new Date().getTime();//定义起始时间的毫秒数
        while(true){
            var time=new Date().getTime();//每次执行循环取得一次当前时间的毫秒数
            if(time-start>n){//如果当前时间的毫秒数减去起始时间的毫秒数大于给定的毫秒数，即结束循环
                break;
            }
        }
    }
</script>
<?php include_once ('./share.php');?>
</body>
</html>